<template>
  <!-- 疫情期间的出行政策 -->
  <div class="select-city">
    <nav-bar>
      <div slot="left" @click="goback">
        <span class="iconfont goback">&#xe600;</span>
      </div>
      <div slot="center"><h2>疫情期间的出行政策</h2></div>
    </nav-bar>

    <!-- 出发的城市 -->
    <div class="field">
      <div class="from">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="出发地"
          placeholder="请选择出发城市"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择出发城市"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>

      <!-- 到达的城市 -->
      <div class="to">
        <van-field
          v-model="fieldValue2"
          is-link
          readonly
          label="目的地"
          placeholder="请选择目的城市"
          @click="show2 = true"
        />
        <van-popup v-model="show2" round position="bottom">
          <van-cascader
            v-model="cascaderValue2"
            title="请选择目的城市"
            :options="options"
            @close="show2 = false"
            @finish="onFinish2"
          />
        </van-popup>
      </div>
    </div>

    <div class="btn">
      <van-button
        block
        round
        color="rgb(78,110,242)"
        type="primary"
        @click="searth"
        >点击查看</van-button
      >
    </div>
    <!-- 政策查询结果 -->
    <div class="content">
      <!-- 出发地 -->
      <div v-if="from_info != null">
        <span class="font">出</span>
        <span class="word">离开{{ from_info.city_name }}</span>
        <ul class="list">
          <li>
            <p>健康码:{{ from_info.health_code_name }}</p>
            <img
              :src="from_info.health_code_picture"
              alt=""
              @click="showimg_from = true"
            />
            <span>点大图扫码</span>
            <van-overlay :show="showimg_from" @click="showimg_from = false">
              <div class="wrapper">
                <div class="block" @click.stop>
                  <img :src="from_info.health_code_picture" alt="" />
                </div>
              </div>
            </van-overlay>
            <!-- 加载更多 -->
            <div class="list" :class="{ isShow: isShow }">
              <div>
                <div class="info">
                  <p>{{ from_info.low_in_desc }}</p>
                  <p>{{ from_info.out_desc }}</p>
                </div>
                <div class="open-btn">
                  <p @click="showMore">{{ text }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 目的地 -->

      <div v-if="to_info != null">
        <span class="font">入</span>
        <span class="word">进入{{ to_info.city_name }}</span>
        <ul class="list">
          <li>
            <p>健康码:{{ to_info.health_code_name }}</p>
            <img
              :src="to_info.health_code_picture"
              alt=""
              @click="showimg_to = true"
            />
            <span>点大图扫码</span>
            <van-overlay :show="showimg_to" @click="showimg_to = false">
              <div class="wrapper">
                <div class="block" @click.stop>
                  <img :src="to_info.health_code_picture" alt="" />
                </div>
              </div>
            </van-overlay>

            <div class="list" :class="{ isShow_s: isShow_s }">
              <div>
                <div class="info">
                  <p>{{ to_info.low_in_desc }}</p>
                  <p>{{ to_info.out_desc }}</p>
                </div>
                <div class="open-btn">
                  <p @click="showMore_s">{{ text_s }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Secret from "../../../api/Secret";
import NavBar from "../../../components/NavBar.vue";
export default {
  name: "Travel",
  components: {
    NavBar,
  },
  // 定义属性
  data() {
    return {
      text: "显示全部",
      text_s: "显示全部",
      isShow: true, //是否显示溢出部分
      isShow_s: true, //是否显示溢出部分

      show: false, //弹窗状态
      show2: false,
      showimg_from: false, //健康码弹窗
      showimg_to: false, //健康码弹窗
      fieldValue: "",
      fieldValue2: "",
      cascaderValue: "",
      cascaderValue2: "",
      from: "", //出发城市的ID
      to: "", //目的城市的ID
      from_info: null, //出发城市信息
      to_info: null, //目的城市信息
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions }) {
      // console.log(value, selectedOptions, tabIndex);
      this.from = value;
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    onFinish2({ value, selectedOptions }) {
      this.to = value;
      this.show2 = false;
      this.fieldValue2 = selectedOptions.map((option) => option.text).join("/");
    },
    //查询城市的出行政策
    searth() {
      console.log(this.from, this.to);
      // 请求接口
      this.$api
        .travelQuery({
          from: this.from,
          to: this.to,
        })
        .then((res) => {
          // console.log("555", res.data);
          this.from_info = res.data.result.from_info; //目的城市信息
          this.to_info = res.data.result.to_info; //出发城市信息
          console.log("11111", this.from_info);
        });
    },
    goback() {
      return history.back();
    },
    showMore() {
      this.isShow = !this.isShow;
      this.text = this.isShow ? "显示全部" : "收起";
    },
    showMore_s() {
      this.isShow_s = !this.isShow_s;
      this.text_s = this.isShow_s ? "显示全部" : "收起";
    },
  },
  mounted() {
    this.$api
      .travelCity({
        key: Secret.travelKey,
      })
      .then((res) => {
        console.log(res.data.result); //如果调用接口次数达到上线，则打印"今日次数已达上限"
        if (res.data.result) {
          //let arr =  [{text:'',value:'',children[{}]},{}]
          let arr = [];
          res.data.result.forEach((element) => {
            //province
            let temp = {};
            temp.text = element.province;
            temp.value = element.province_id;
            temp.children = [];
            element.citys.forEach((item) => {
              let obj = {};
              obj.text = item.city;
              obj.value = item.city_id;
              temp.children.push(obj);
            });
            arr.push(temp);
          });
          this.options = arr;
          console.log(arr);
        } else {
          console.log("今日次数已达上限");
        }
      });
  },
};
</script>

<style lang="less" scoped>
.select-city {
  border-top: 1px solid #eee;

  padding-bottom: 0.4rem;
  background: #f5f5f5;
  // min-height: 11rem;
  .goback {
    font-size: 0.5rem;
    vertical-align: middle;
    color: rgb(78, 110, 242);
  }
  h2 {
    font-size: 0.4rem;
    text-align: center;
  }
  .field {
    width: 6rem;
    margin-left: 0.8rem;
    margin-top: 0.3rem;

    .to {
      margin-top: 0.2rem;
    }
  }
  .btn {
    width: 6rem;
    margin-left: 0.75rem;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
  }
}

.content {
  background: #f5f5f5;

  // margin-left: 0.2rem;
  // margin-right: 0.2rem;
  border-radius: 0.2rem;
  // margin-bottom: 0.2rem;
  margin: 0.2rem;
  font-size: 0.32rem;
  .font {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgb(96, 96, 245);
    color: #eee;
    text-align: center;
    line-height: 0.6rem;
    margin: 0.4rem 0.2rem 0.1rem 0.3rem;
  }
  .word {
    font-size: 0.4rem;
    color: #000;
    letter-spacing: 0.05rem;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
  }
  .list {
    position: relative;
    margin-top: 0.2rem;
    padding: 0.1rem;
    background: rgb(243, 245, 231);
    border-radius: 0.2rem;
    letter-spacing: 0.02rem;
    line-height: 0.5rem;
    li {
      p {
        margin-left: 0.2rem;
      }
      img {
        padding-left: 0.2rem;
        width: 0.5rem;
        vertical-align: middle;
        margin-bottom: 0.1rem;
      }
    }
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      background-color: #fff;
      border-radius: 0.1rem;
      padding: 0.1rem;
      img {
        padding-left: 0;
        margin-bottom: 0;
        width: 5rem;
      }
    }
    .isShow {
      position: relative;
      height: 200px;
      overflow: hidden; /*设置文案容器高度，超出部分隐藏*/
    }
    .isShow_s {
      position: relative;
      height: 200px;
      overflow: hidden; /*设置文案容器高度，超出部分隐藏*/
    }
    .info {
      padding-bottom: 1.1rem;
    }
    .open-btn {
      // padding: 0.1rem;
      width: 7.32rem;
      position: absolute;
      bottom: 0;
      height: 0.8rem;
      // background: burlywood;
      background: rgb(243, 245, 231);
    }
    .open-btn p {
      text-align: center;
      color: chocolate;
      margin-top: 0.1rem;
      padding-right: 0.7rem;
    }
  }
}
</style>
